/* Remote control styling */

#remote #color-wrapper{
    background:#232428;
    height:200px;
    width:100%;
    -moz-background-clip: border;  
    -webkit-background-clip: border; 
    background-clip: border-box;

    -moz-background-clip: padding;  
    -webkit-background-clip: padding; 
    background-clip: padding-box;   

    -moz-background-clip: content;   
    -webkit-background-clip: content;  
    background-clip: content-box; 

    border-bottom:40px solid #151618;
    overflow:visible;
}

#remote i.ellipsis.vertical.icon.settings{ 
    font-size:32px; 
    z-index:9; 
    padding:20px 30px 40px 20px;
    position: absolute;
    top: 0px;
    left: 10px;
    color:#f1f1f1;
}
#remote .push{height:80px; width:100%;}

#remote #remote-wrapper{
    display:table;
    width: 200px;
    border-radius: 200px;
    height:200px;
    background:#fff;
    margin:0 auto;
    padding: 10px;
    position:relative;

    border: 10px solid rgba(255,255,255,.5);

    -moz-background-clip: border;  
    -webkit-background-clip: border; 
    background-clip: border-box;

    -moz-background-clip: padding;  
    -webkit-background-clip: padding; 
    background-clip: padding-box;   


    -moz-box-shadow: inset 0 0 30px #ccc;
    -webkit-box-shadow: inset 0 0 30px #ccc;
    box-shadow: inset 0 0 30px #ccc;

    z-index:9;
}

#remote #remote-wrapper div{
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
    -moz-transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
    -o-transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
    -ms-transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
    transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

#remote h1{
    float:right;
    color:#f1f1f1;
    font-family: 'Open Sans', sans-serif; 
    font-weight:100;
    font-size:20px;
    margin:10px 20px 0 0px;
    padding:0;
    display:block;
    text-align:right;
}

#remote h1 span{ font-size:14px; display:block;}

#remote #remote-wrapper .link{position:absolute; }
#remote #remote-wrapper .link .icon {margin: 0;}
#remote #remote-wrapper .inner-wrapper {position: relative; height:100%;}
#remote #remote-wrapper .vert-middle.horiz-middle{top:50%;  -webkit-transform: translate(-50%, -50%);}

#remote #remote-wrapper .vert-top{top:0;}
#remote #remote-wrapper .vert-middle{top:50%;  -webkit-transform: translateY(-50%);}
#remote #remote-wrapper .vert-bottom{bottom:0;}

#remote #remote-wrapper .horiz-left{left:0;}
#remote #remote-wrapper .horiz-middle{left:50%; -webkit-transform: translateX(-50%);}
#remote #remote-wrapper .horiz-right{right:0;}

#remote i.icon{font-size:20px;}	
#remote #remote-wrapper div:hover > i.icon{	color: #fb8521;}

#remote #plain-wrapper{ position:relative;}
#remote #plain-wrapper .link{position: absolute; }

#remote #plain-wrapper .fullscreen.link{ left: 5%; top: 30px;}
#remote #plain-wrapper .mute.link{ right: 20%; top:110px;}
#remote #plain-wrapper .keyboard.link{ left: 20%; top:110px;}
#remote #plain-wrapper .dashboard.link{ top:150px; left: 50%; -webkit-transform: translateX(-50%); width:60px; height:60px; background:#fb8521; }
#remote #plain-wrapper .dashboard.link > i{ font-size:34px; color:#fff!important; line-height:45px; }
#remote #plain-wrapper .dashboard.link > i:hover{ color:#fff!important;}
#remote #plain-wrapper .shuffle.link{ right: 5%; top: 30px;}

#remote #plain-wrapper div{
    background:#f7f7f7;
    border: 5px solid rgba(220,220,220,.5);

    width:50px;
    height:50px;

    -moz-background-clip: border;  
    -webkit-background-clip: border; 
    background-clip: border-box;

    -moz-background-clip: padding;  
    -webkit-background-clip: padding; 
    background-clip: padding-box;   

    -moz-background-clip: content;   
    -webkit-background-clip: content;  
    background-clip: content-box; 

    -webkit-box-shadow: 0 5px 6px -6px #333;
    -moz-box-shadow: 0 5px 6px -6px #333;
    box-shadow: 0 5px 6px -6px #333;

    border-radius:200px;	
    text-align:center;
}
#remote #plain-wrapper div i.icon{ color:#333; line-height:40px; text-align: center; width: 100%; }

#remote #settings{
    width:250px;
    height:100vh;
    position:absolute;
    -webkit-box-shadow: 0 5px 6px -6px #333;
    -moz-box-shadow: 0 5px 6px -6px #333;
    box-shadow: 0 5px 6px -6px #333;
    border-right:1px solid #ccc;
    left:-250px;
    top:0;
    z-index:10;
    background:#f7f7f7;
    margin:0;
    padding:10px 0;
}

#setupRemote{height:100vh;}

#remote #settings.show{left:0;}
#remote #settings #setupRemote{
    width:240px; 
    margin:0; 
    padding-left:10px; 
    overflow-y:scroll;
    background:#151618;
    overflow-x:hidden;
}
#remote #settings .row{ width:210px; margin-top:10px;}
#remote #settings label,
#remote #settings span.label{color:#f1f1f1; font-size:13px;width:200px; margin-bottom:10px;}

#remote #main{
    width:100%;
    height:100%; 
    min-height: 550px;
    height:auto; 
    position: relative;
}

#remote input,
#remote select{width:87%; font-size:12px;}
#remote .status{bottom:10px; left:0; position:absolute; width:100%; text-align:center;}
#remote #keyboard-wrapper{
    width:100%;
    height:100px;
    position: absolute;
    bottom: 0;
    border-top:5px solid rgba(220,220,220,.8);
    z-index:10;
    background:#f7f7f7;
    margin:0;
    padding:10px 0;
    display:none;
    padding:20px;
}

#remote #keyboard-wrapper input[type=text]{ margin-bottom:10px; width: 100%;}
#remote #keyboard-wrapper.show{	display:block; }


i{
    opacity:1;
    color: #989898;

}
